import React, {Component} from 'react';
import {
    Text,
    View,
    TextInput,
    Button,
    TouchableOpacity,
    ScrollView,
    Dimensions,
    ImageBackground,
    StyleSheet,
    Image,
} from 'react-native';
import  {storeData} from "../../../storage";
import {StackNavigator, Navigator,createAppContainer,} from 'react-navigation';
import {createStackNavigator}from'react-navigation-stack';
import HGBCSheQuZhiLi from '../MainInterface';
let widthScreen = Dimensions.get('window').width;
let heightScreen = Dimensions.get('window').height;
let headerHeightRatio = 0.044;
let Token='';


export  default  class loginPage extends Component {
    static navigationOptions = {
        header: null,
    };
    constructor(props) {
        super(props);
        this.state = {
            error_code: '1',
        };
    }
    fetchToken() {
        let formData = new FormData();
        formData.append('username', this.state.username);
        formData.append('password', this.state.password);
        return fetch('http://47.104.75.42:9000/mobile/account/login.shtml', {
            method: 'post',
            headers: {
                imei: '1',
                version: '2',
                token: '',
            },
            body: formData,
        })
            .then(response => response.json())
            .then(responseJson => {
                this.setState({
                    isLoading: false,
                    result: responseJson,
                });
                //alert(responseJson.data.token);
                storeData('token', responseJson.data.token);
                storeData('uid', responseJson.data.uid);
                storeData('loginname', responseJson.data.login_name);
                storeData('phone', responseJson.data.phone);
                //alert(responseJson.data.token);
                this.props.navigation.navigate('HGBCSheQuZhiLi');
            })
            .then()
            .catch(error => {
                console.error(error);
            });
    }
    render() {
        return (
            <View style={loginPageStyle.backgroundView}>
                <View style={loginPageStyle.loginView}>
                    <View style={{height: heightScreen * 0.048}} />
                    <Text style={textStyle.black32B}>登陆星球</Text>
                    <View style={{width: widthScreen * 0.667}}>
                        <TextInput
                            placeholder={'用户名'}
                            placeholderTextColor={'#bbbbbb'}
                            style={textInputStyle.MiddleLine}
                            onChangeText={text => this.setState({username: text})}
                        />
                        <View style={lineStyle.Middle} />
                    </View>
                    <View style={{width: widthScreen * 0.667}}>
                        <TextInput
                            placeholder={'密码'}
                            placeholderTextColor={'#bbbbbb'}
                            style={textInputStyle.MiddleLine}
                            onChangeText={text => this.setState({password: text})}
                        />
                        <View style={lineStyle.Middle} />
                    </View>
                    <View style={{marginTop: heightScreen * 0.029}}>
                        <TouchableOpacity>
                            <Text
                                style={{
                                    color: '#667AF5',
                                    width: widthScreen * 0.667,
                                    textAlign: 'right',
                                }}>
                                忘记用户名或密码？
                            </Text>
                        </TouchableOpacity>
                    </View>
                    <View style={{height: heightScreen * 0.048}} />
                    <TouchableOpacity onPress={this.fetchToken.bind(this)}>
                        <View style={buttonStyle.MiddleBlueRoundLight}>
                            <Text style={buttonTextStyle.white}>进入星球</Text>
                        </View>
                    </TouchableOpacity>
                </View>
                <View style={{height: heightScreen * 0.073}} />
                <TouchableOpacity>
                    <Text style={textStyle.blue22B}>立即注册</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const loginPageStyle = StyleSheet.create({
    backgroundView: {
        alignItems: 'center',
        backgroundColor: '#000000',
        width: widthScreen,
        height: heightScreen,
    },
    loginView: {
        backgroundColor: '#FFFFFF',
        width: widthScreen * 0.852,
        height: heightScreen * 0.482,
        marginTop: heightScreen * (0.23 - headerHeightRatio),
        borderRadius: widthScreen * 0.04,
        alignItems: 'center',
    },
});
const buttonStyle = StyleSheet.create({
    MiddleBlueRoundLight: {
        backgroundColor: '#32A8F0',
        width: widthScreen * 0.655,
        height: heightScreen * 0.06,
        borderRadius: (widthScreen * 0.665) / 2,
        alignItems: 'center',
        justifyContent: 'center',
    },
    MiddleBlueRoundLightS: {
        backgroundColor: '#32A8F0',
        width: widthScreen * 0.655,
        height: heightScreen * 0.06,
        borderRadius: (widthScreen * 0.665) / 2,
        marginTop: heightScreen * 0.048,
        alignItems: 'center',
        justifyContent: 'center',
    },
    LongBlueRoundLight: {
        backgroundColor: '#32A8F0',
        width: widthScreen * 0.791,
        height: heightScreen * 0.071,
        borderRadius: (widthScreen * 0.677) / 2,
        alignItems: 'center',
        justifyContent: 'center',
    },
});
const buttonTextStyle = StyleSheet.create({
    white: {
        color: '#FFFFFF',
        //fontFamily: 'MicrosoftYaHei',
        fontSize: heightScreen * 0.02,
        fontWeight: '700',
    },
});
const textStyle = StyleSheet.create({
    black32B: {
        fontSize: heightScreen * 0.032,
        color: '#000000',
        //fontFamily: 'MicrosoftYaHei',
        fontWeight: 'bold',
    },
    blue15: {
        color: '#37ADFF',
        fontSize: heightScreen * 0.015,
        //fontFamily: 'MicrosoftYaHei',
    },
    blue22B: {
        color: '#37ADFF',
        fontSize: heightScreen * 0.022,
        //fontFamily: 'MicrosoftYaHei',
        fontWeight: 'bold',
    },
    blue22: {
        color: '#37ADFF',
        fontSize: heightScreen * 0.022,
        //fontFamily: 'MicrosoftYaHei',
    },
    blue18: {
        color: '#37ADFF',
        fontSize: heightScreen * 0.018,
        //fontFamily: 'MicrosoftYaHei',
    },
    white22: {
        color: '#FFFFFF',
        fontSize: heightScreen * 0.022,
        //fontFamily: 'MicrosoftYaHei',
        fontWeight: 'bold',
    },
    white32B: {
        color: '#FFFFFF',
        fontSize: heightScreen * 0.032,
        //fontFamily: 'MicrosoftYaHei',
        fontWeight: 'bold',
    },
    white38: {
        color: '#FFFFFF',
        fontSize: heightScreen * 0.038,
        //fontFamily: 'MicrosoftYaHei',
    },
    gray15: {
        color: '#999999',
        fontSize: heightScreen * 0.015,
        //fontFamily: 'MicrosoftYaHei',
    },
    gray18: {
        color: '#999999',
        fontSize: heightScreen * 0.018,
        //fontFamily: 'MicrosoftYaHei',
    },
    gray22: {
        color: '#999999',
        fontSize: heightScreen * 0.022,
        //fontFamily: 'MicrosoftYaHei',
    },
});
const textInputStyle = StyleSheet.create({
    MiddleLine: {
        padding:0,
        //underlineColorAndroid:"transparent",
        paddingVertical: 0,
        height: heightScreen * 0.055,
        marginTop: heightScreen * 0.036,
        fontSize: heightScreen * 0.021,
    },
});
const lineStyle = StyleSheet.create({
    Middle: {
        width: widthScreen * 0.667,
        height: 0.5,
        backgroundColor: '#DCDCDC',
    },
    Middle2: {
        width: widthScreen * 0.792,
        height: 0.5,
        backgroundColor: '#DCDCDC',
    },
    Long: {
        width: widthScreen * 0.84,
        height: 0.5,
        backgroundColor: '#DCDCDC',
    },
});
// const Stack =createStackNavigator({
//     Home:{
//         screen:loginPage,
//     },
//     Next:{
//         screen:HGBCSheQuZhiLi,
//     }
// },{
//     navigationOptions:{
//         header:null,
//     },
// })
// export  default createAppContainer(Stack);
